<template>
  <div class="page_main">
    <div class="search_box flex flex-no-wrap justify-between">
      <el-radio-group v-model="dateRangeType" size="mini" @change="getDrawRateSummary">
        <el-radio-button label="YEAR">年</el-radio-button>
        <el-radio-button label="MONTH">月</el-radio-button>
        <el-radio-button label="WEEK">周</el-radio-button>
      </el-radio-group>
      <el-button type="primary" size="mini" @click="exportExcel">导出</el-button>
    </div>
    <div class="data_box">
      <table v-loading="loading" id="data_table" class="mailTable">
        <tr class="firstTr">
          <th class="firstTd" :colspan="8+area_arr.length"
              style="background-color: rgb(197,217,241);font-size: 25px;line-height: 60px;height: 60px"
          >各资源媒体上画率统计
          </th>
        </tr>
        <tr>
          <td class="firstTd column" rowspan="2">资源</td>
          <td v-for="item in media_type_arr" class="column" :colspan="getColSpan(item)" :rowspan="getRowSpan(item)">
            <el-button v-if="item != '楼宇框架'" type="text" class="text-black hover" style="text-decoration: underline"
                       @click="showDetail(item)"
            >{{
                item + '（' + (dateRangeType === 'WEEK' ? '周度' : (dateRangeType === 'YEAR' ? '年度' : '月度')) + '）'
              }}
            </el-button>
            <div v-else>
              {{ item + '（' + (dateRangeType === 'WEEK' ? '周度' : (dateRangeType === 'YEAR' ? '年度' : '月度')) + '）' }}
            </div>
          </td>
        </tr>
        <tr>
          <td v-for="item in gas_station_media_type_arr" class="column">
            {{ getGasStationMediaTypeName(item) }}
          </td>
          <td v-for="area in area_arr" class="column">
            <el-button type="text" class="text-black hover" style="text-decoration: underline"
                       @click="showDetail(area.name)"
            >{{ area.name }}
            </el-button>
          </td>
        </tr>
        <tr>
          <td class="firstTd column">上画率</td>
          <td v-for="item in count_data" class="column">
            {{ getMediaPublishRateStr(item.media_publish_rate) }}
          </td>
        </tr>
      </table>
    </div>
    <el-dialog title="明细" :visible.sync="centerDialogVisible" width="80%" center top="20px" @close="closeDetailDialog">
      <div style="text-align: right;padding: 0 10px;margin-bottom: 10px">
        <el-button size="mini" type="primary"
                   @click="dialogExportExcel(type_name,type!==3?'dialogDataTable1':'dialogDataTable2')"
        >导出
        </el-button>
      </div>
      <div style="max-height: 600px;overflow-y: scroll" v-loading="detailLoading">
        <table v-if="type === 1 || type===2 || type===4" id="dialogDataTable1" class="mailTable">
          <tr class="firstTr">
            <th class="firstTd column" style="font-size: 25px;line-height: 60px;"
                :colspan="type===4?14:type===2?7:6"
            >{{ type_name }}
            </th>
          </tr>
          <tr class="secondTr">
            <th class="firstTd column" style="width: 400px;">项目</th>
            <th v-if="type === 4" class="column" style="width: 80px;">区域</th>
            <th v-if="type === 4" class="column" style="width: 120px;">周边生态覆盖</th>
            <th v-if="type === 4" class="column" style="width: 130px;">均价(元/平米)</th>
            <th v-if="type === 4" class="column" style="width: 80px;">年份</th>
            <th v-if="type === 4" class="column" style="width: 130px;">居住规模</th>
            <th v-if="type === 4" class="column" style="width: 120px;">受众描述</th>
            <th v-if="type === 4" class="column" style="width: 80px;">楼栋数</th>
            <th v-if="type === 4" class="column" style="width: 80px;">单元总数</th>
            <th class="column" style="width: 150px;">地址</th>
            <th v-if="type === 2" class="column" style="width: 200px;">位置</th>
            <th class="column" style="width: 80px;">总数</th>
            <th class="column" style="width: 80px;">剩余</th>
            <th class="column" style="width: 80px;">上画数</th>
            <th class="column" style="width: 80px;">上画率</th>
          </tr>
          <tr v-for="(item,index) in detailData.list" :key="index">
            <td class="firstTd column" style="width: 400px;background-color: rgb(242, 246, 252)">
              {{ item.building_area_name }}
            </td>
            <td v-if="type === 4" class="column" style="width: 80px">{{ item.area_name }}</td>
            <td v-if="type === 4" class="column" style="width: 120px">{{ item.cover_location }}</td>
            <td v-if="type === 4" class="column" style="width: 130px">{{ item.price }}</td>
            <td v-if="type === 4" class="column" style="width: 80px">{{ (item.check_in_at || '').substr(0, 4) }}</td>
            <td v-if="type === 4" class="column" style="width: 130px">{{ item.scale }}</td>
            <td v-if="type === 4" class="column" style="width: 120px">
              {{ getAudienceDescriptionStr(item.audience || []) }}
            </td>
            <td v-if="type === 4" class="column" style="width: 80px">{{ item.building_number }}</td>
            <td v-if="type === 4" class="column" style="width: 80px">{{ item.unit_number }}</td>
            <td class="column" style="width: 150px">{{ item.address }}</td>
            <td v-if="type === 2" class="column" style="width: 200px">{{ item.location_supply }}</td>
            <td :class="['column count-class all-count', {'zero-count':!item.media_total_count}]">
              {{ item.media_total_count }}
            </td>
            <td :class="['column count-class remain-count', {'zero-count':!item.media_remain_count}]">
              {{ item.media_remain_count }}
            </td>
            <td :class="['column count-class use-count', {'zero-count':!item.media_publish_count}]">
              {{ item.media_publish_count }}
            </td>
            <td class="column rate-class">
              {{ getMediaPublishRateStr(item.media_publish_rate) }}
            </td>
          </tr>
          <tr v-if="type != null" class="sum-tr">
            <td class="firstTd column" :colspan="type===4 ? 10 : type===2 ? 3 : 2">
              总计
            </td>
            <td class="column count-class all-count sum-count">
              {{ (detailData.totalRate || {}).media_total_count }}
            </td>
            <td class="column count-class remain-count sum-count">
              {{ (detailData.totalRate || {}).media_remain_count }}
            </td>
            <td class="column count-class use-count sum-count">
              {{ (detailData.totalRate || {}).media_publish_count }}
            </td>
            <td class="column rate-class sum-rate-class">
              {{ getMediaPublishRateStr((detailData.totalRate || {}).media_publish_rate) }}
            </td>
          </tr>
          <tr v-if="type===4">
            <td v-show="false" class="firstTd column" colspan="14">
              注：受众描述部分
            </td>
          </tr>
          <tr v-if="type===4" v-for="dict in audienceDescriptionArr" :key="dict.id">
            <td v-show="false" class="column" colspan="14">
              {{ orderMap.get(dict.id) + '代表' + dict.name }}
            </td>
          </tr>
        </table>
        <table v-if="type == 3" class="mailTable" id="dialogDataTable2" style="width: 98%">
          <tr class="firstTr">
            <td class="firstTd column" colspan="15" style="font-size: 25px;line-height: 60px;background-color: #DCDFE6">
              {{ type_name }}
            </td>
          </tr>
          <tr class="secondTr">
            <th class="firstTd column" rowspan="2" style="width: 120px;">区域</th>
            <th class="column" rowspan="2" style="width: 400px;">项目</th>
            <th class="column" rowspan="2" style="width: 250px;">地址</th>
            <th class="column" colspan="4" style="background-color: #ffedd7 ">广告牌</th>
            <th class="column" colspan="4" style="background-color: #edffd7 ">立柱</th>
            <th class="column" colspan="4" style="background-color: #d7fff7 ">加油机</th>
          </tr>
          <tr class="secondTr">
            <td class="column" style="">总数</td>
            <td class="column" style="">剩余数</td>
            <td class="column" style="">上画数</td>
            <td class="column" style="">上画率</td>
            <td class="column" style="">总数</td>
            <td class="column" style="">剩余数</td>
            <td class="column" style="">上画数</td>
            <td class="column" style="">上画率</td>
            <td class="column" style="">总数</td>
            <td class="column" style="">剩余数</td>
            <td class="column" style="">上画数</td>
            <td class="column" style="">上画率</td>
          </tr>
          <tr v-for="(item,index) in detailData.list" :key="index">
            <td class="firstTd column" style="background-color: rgb(242, 246, 252)">{{ item.area_name }}</td>
            <td class="column">{{ item.building_area_name }}</td>
            <td class="column">{{ item.address }}</td>
            <td class="column count-class all-count">{{ item.advertisement.media_total_count }}</td>
            <td class="column count-class remain-count">{{ item.advertisement.media_remain_count }}</td>
            <td class="column count-class use-count">{{ item.advertisement.media_publish_count }}</td>
            <td class="column rate-class">
              {{ getMediaPublishRateStr(item.advertisement.media_publish_rate) }}
            </td>
            <td class="column count-class all-count">{{ item.column.media_total_count }}</td>
            <td class="column count-class remain-count">{{ item.column.media_remain_count }}</td>
            <td class="column count-class use-count">{{ item.column.media_publish_count }}</td>
            <td class="column rate-class">{{ getMediaPublishRateStr(item.column.media_publish_rate) }}</td>
            <td class="column count-class all-count">{{ item.gasMachine.media_total_count }}</td>
            <td class="column count-class remain-count">{{ item.gasMachine.media_remain_count }}</td>
            <td class="column count-class use-count">{{ item.gasMachine.media_publish_count }}</td>
            <td class="column rate-class">
              {{ getMediaPublishRateStr(item.gasMachine.media_publish_rate) }}
            </td>
          </tr>
          <tr class="sum-tr">
            <td class="column firstTd" colspan="3">合计</td>
            <td class="column count-class all-count sum-count">
              {{ (detailData.advertisementTotalRate || {}).media_total_count }}
            </td>
            <td class="column count-class remain-count sum-count">
              {{ (detailData.advertisementTotalRate || {}).media_remain_count }}
            </td>
            <td class="column count-class use-count sum-count">
              {{ (detailData.advertisementTotalRate || {}).media_publish_count }}
            </td>
            <td class="column rate-class sum-rate-class">
              {{ getMediaPublishRateStr((detailData.advertisementTotalRate || {}).media_publish_rate) }}
            </td>
            <td class="column count-class all-count sum-count">
              {{ (detailData.columnTotalRate || {}).media_total_count }}
            </td>
            <td class="column count-class remain-count sum-count">
              {{ (detailData.columnTotalRate || {}).media_remain_count }}
            </td>
            <td class="column count-class use-count sum-count">
              {{ (detailData.columnTotalRate || {}).media_publish_count }}
            </td>
            <td class="column rate-class sum-rate-class">
              {{ getMediaPublishRateStr((detailData.columnTotalRate || {}).media_publish_rate) }}
            </td>
            <td class="column count-class all-count sum-count">
              {{ (detailData.gasMachineTotalRate || {}).media_total_count }}
            </td>
            <td class="column count-class remain-count sum-count">
              {{ (detailData.gasMachineTotalRate || {}).media_remain_count }}
            </td>
            <td class="column count-class use-count sum-count">
              {{ (detailData.gasMachineTotalRate || {}).media_publish_count }}
            </td>
            <td class="column rate-class sum-rate-class">
              {{ getMediaPublishRateStr((detailData.gasMachineTotalRate || {}).media_publish_rate) }}
            </td>
          </tr>
        </table>
      </div>
      <div v-if="type==4" style="text-align: center;min-height: 20px;line-height:20px;padding: 10px 0">
        <div>注：受众描述部分</div>
        <div v-for="dict in audienceDescriptionArr" :key="dict.id">{{ orderMap.get(dict.id) + '代表' + dict.name }}</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="centerDialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  draw_rate_detail_building,
  draw_rate_detail_common, draw_rate_detail_elevator,
  draw_rate_detail_gas_station,
  draw_rate_summary
} from '@/api/report/report'
import { list_all3rd_bycode } from '@/api/business/setting/dict.js'
import { multiply } from '@/utils/amount'
import XLSX from 'xlsx'
import { formatDateByFmt } from '@/utils/util'

export default {
  name: 'painting_rate',
  data() {
    return {
      dateRangeType: 'MONTH',
      gas_station_media_type_arr: [],
      count_data: [],
      media_type_arr: [],
      area_arr: [],
      centerDialogVisible: false,
      type: null,
      detailData: {},
      type_name: null,
      detailLoading: false,
      loading: false,
      audienceDescriptionArr: [],
      orderMap: new Map()
    }
  },
  created() {
    this.getDrawRateSummary(this.dateRangeType)
    this.initAudienceDescription()
  },
  methods: {
    exportExcel() {
      var table_elt = document.getElementById('data_table')
      var workbook = XLSX.utils.table_to_book(table_elt)
      var ws = workbook.Sheets['Sheet1']
      XLSX.utils.sheet_add_aoa(ws, [])
      XLSX.writeFile(workbook, '所有类型上画率统计' + (formatDateByFmt(new Date(), 'yyyyMMddhhmmss') + Math.floor(Math.random() * (1000000 - 1) + 1)) + '.xlsx')
    },
    dialogExportExcel(name, table_name) {
      var table_elt = document.getElementById(table_name)
      var workbook = XLSX.utils.table_to_book(table_elt)
      var ws = workbook.Sheets['Sheet1']
      XLSX.utils.sheet_add_aoa(ws, [])
      XLSX.writeFile(workbook, (name + '上画率') + (formatDateByFmt(new Date(), 'yyyyMMddhhmmss') + Math.floor(Math.random() * (1000000 - 1) + 1)) + '.xlsx')
    },
    getDrawRateSummary(dateRangeType) {
      this.area_arr = []
      this.media_type_arr = []
      this.gas_station_media_type_arr = []
      this.count_data = []
      this.loading = true
      draw_rate_summary({ dateRangeType }).then(res => {
        this.count_data = res.data
        this.loading = false
        this.count_data.forEach(item => {
          if (item.media_type_id == 5 || item.media_type_id == 6 || item.media_type_id == 7) {
            if (this.gas_station_media_type_arr.find(mediaId => mediaId == item.media_type_id) === undefined) {
              this.gas_station_media_type_arr.push(item.media_type_id)
            }
            if (this.media_type_arr.find(tmp => tmp == '加油站') === undefined) {
              this.media_type_arr.push('加油站')
            }
          } else if (item.media_type_id == 2) {
            this.area_arr.push({ name: item.type_name, adcode: item.adcode })
            if (this.media_type_arr.find(tmp => tmp == '楼宇框架') === undefined) {
              this.media_type_arr.push('楼宇框架')
            }
          } else {
            this.media_type_arr.push(item.type_name)
          }
        })
      })
    },
    getGasStationMediaTypeName(id) {
      let find = this.count_data.find(item => item.media_type_id == id)
      if (find) {
        return find.type_name
      } else {
        return ''
      }
    },
    getRowSpan(name) {
      if (name == '加油站' || name == '楼宇框架') {
        return 1
      } else if (this.gas_station_media_type_arr.length > 0 || this.area_arr.length > 0) {
        return 2
      } else {
        return 1
      }
    },
    getColSpan(name) {
      if (name != '加油站' && name != '楼宇框架') {
        return 1
      } else if (name == '加油站') {
        return this.gas_station_media_type_arr.length
      } else {
        return this.area_arr.length
      }
    },
    getMediaPublishRateStr(rete) {
      let num = multiply(rete, 100)
      return num + '%'
    },
    showDetail(name) {
      let find = this.count_data.find(item => item.type_name == name)
      if (name == '加油站') {
        find = { type_name: '加油站' }
      }
      if (find === undefined) {
        this.$message.error('数据有误！请联系管理员')
        return
      }
      if (find.type_name == '加油站') {
        this.type_name = '加油站'
        this.getDetailData(null, null, 3)
      } else if (find.type_name == '电梯智能框') {
        this.type_name = '电梯智能框'
        this.getDetailData(null, null, 4)
      } else if (find.media_type_id == 2) {
        this.type_name = name + '楼宇框架'
        this.getDetailData(find.adcode, null, 2)
      } else {
        this.type_name = find.type_name
        this.getDetailData(find.adcode, find.media_type_id, 1)
      }
      this.type_name += this.dateRangeType === 'WEEK' ? '(周度)' : (this.dateRangeType === 'YEAR' ? '年度' : '月度')
      this.centerDialogVisible = true
    },
    /**
     *
     * @param adcode
     * @param media_type_id
     * @param type 1:通用 2:楼宇 3:加油站 4:电梯智能框
     */
    getDetailData(adcode, media_type_id, type) {
      this.type = type
      this.detailLoading = true
      if (type === 1) {
        draw_rate_detail_common({
          media_type_id: media_type_id,
          dateRangeType: this.dateRangeType
        }).then(res => {
          this.detailData = res.data
          this.detailLoading = false
        })
      } else if (type === 2) {
        draw_rate_detail_building({
          adcode: adcode,
          dateRangeType: this.dateRangeType
        }).then(res => {
          this.detailData = res.data
          this.detailLoading = false
        })
      } else if (type === 3) {
        draw_rate_detail_gas_station({
          dateRangeType: this.dateRangeType
        }).then(res => {
          this.detailData = res.data
          this.detailLoading = false
        })
      } else {
        draw_rate_detail_elevator({
          dateRangeType: this.dateRangeType
        }).then(res => {
          this.detailData = res.data
          this.detailLoading = false
        })
      }
    },
    closeDetailDialog() {
      this.type = null
      this.detailData = {}
      this.type_name = null
    },
    initAudienceDescription() {
      list_all3rd_bycode({
        code: 'xmxg-sz'
      }).then(res => {
        console.log(res.data)
        for (let i = 0; i < res.data.length; i++) {
          if (!this.orderMap.has(res.data[i].id)) {
            this.orderMap.set(res.data[i].id, i + 1)
          }
          this.audienceDescriptionArr.push(res.data[i])
        }
      })
    },
    getAudienceDescriptionStr(arr) {
      let new_arr = []
      arr.forEach(id => {
        if (this.orderMap.has(id)) {
          new_arr.push(this.orderMap.get(id))
        }
      })
      new_arr.sort(function(a, b) {
        return a - b
      })
      return new_arr.join('，')
    }
  }
}
</script>

<style scoped lang="scss">
.page_main {
  margin-top: 20px;
  padding: 0 20px;
}

.search_box {

}

.data_box {
  margin-top: 10px;
}

.mailTable {
  width: 100%;
  font-size: 12px;
  margin: 0 auto 10px auto;
  border-collapse: collapse;
}

.mailTable tr th {
  height: 30px;
  line-height: 30px;
  box-sizing: border-box;
  //padding: 0 10px;
  border-bottom: 1px solid #E6EAEE;
  border-right: 1px solid #E6EAEE;
}

.mailTable tr td {
  height: 30px;
  line-height: 30px;
  box-sizing: border-box;
  //padding: 0 10px;
  border-bottom: 1px solid #E6EAEE;
  border-right: 1px solid #E6EAEE;
}

.firstTr td {
  border-top: 1px solid #E6EAEE;
}

.firstTr th {
  border-top: 1px solid #E6EAEE;
}

.firstTd {
  width: 150px !important;
  border-left: 1px solid #E6EAEE;
}

.mailTable tr td.column {
  text-align: center;
}

.hover:hover {
  color: #409EFF;
  //background-color: #f5d88d;
}

.count-class {
  width: 80px;

  &.sum-count {
    font-size: 15px;
    font-weight: 500;
  }

  &.all-count {
    color: #409EFF;

    &.sum-count {
      text-shadow: 0 0 2px #409EFF;
    }
  }

  &.remain-count {
    color: #67C23A;

    &.sum-count {
      text-shadow: 0 0 2px #67C23A;
    }
  }

  &.use-count {
    color: #F56C6C;

    &.sum-count {
      text-shadow: 0 0 2px #F56C6C;
    }
  }

  &.zero-count {
    color: #909399 !important;

    &.sum-count {
      text-shadow: 0 0 2px #909399 !important;
    }
  }
}

.rate-class {
  width: 80px;
  font-weight: normal;
  color: #E6A23C;

  &.sum-rate-class {
    font-size: 15px;
    font-weight: 600;
    text-shadow: 0 0 2px #E6A23C;
  }
}

.firstTr {
  .column {
    background-color: #DCDFE6;
  }
}

.secondTr {
  .column {
    background-color: #E4E7ED;
  }
}

.sum-tr {
  .column {
    background-color: #F2F6FC;
  }
}
</style>
